<template>
  <a-table 
    :columns="columns" 
    :data-source="filteredTreeData" 
    :pagination="false"
    row-key="label"
  >
    <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operation'">
            <div style="display: flex;">
                <a-button type="link" @click="handleAddChild(record)">
                    <template #icon>
                        <plus-outlined />
                    </template>
                    <span style="margin-left: 5px;">新增</span>   
                </a-button>
                <a-button 
                type="link" 
                danger 
                style="display: flex; flex-direction: row-reverse;align-items: center;"
                @click="handleRemove(record)"
                >
                    <span style="margin-right: 5px;">删除</span>
                    <template #icon>
                        <down-outlined />
                    </template>
                </a-button>
            </div>
        </template>
    </template>
  </a-table>

</template>
<script lang="ts" setup>
import {
  PlusOutlined,
  DownOutlined
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { computed } from 'vue';
import { defineProps, defineEmits } from 'vue';

interface TreeItem {
  value: string;
  label: string;
  note?: string;
  children?: TreeItem[]
}

interface TreeDataProps {
  treeData: TreeItem[];
  filterValue: string[];
}

const props = defineProps<TreeDataProps>()
const emits = defineEmits(['update:treeData', 'add-child'])
//过滤的树形组件
const filteredTreeData = computed(() => {
  if(!props.filterValue || props.filterValue.length === 1){
    return props.treeData
  }
  //获取最后一个值
  const filterValue = props.filterValue[props.filterValue.length -1 ]
  //查找匹配的节点
  const findNode = (nodes: TreeItem[]): TreeItem | null => {
    for(const node of nodes){
      if(node.value === filterValue){
        return node
      }
      if(node.children){
        const found = findNode(node.children)
        if(found){
          return found
        }
      }
    }
    return null
  }
  const matchedNode = findNode(props.treeData)
  return matchedNode ? [matchedNode] : [];
})
const columns = [
  {
    title: '组织名称',
    dataIndex: 'label',
    key: 'label',
    width: '30%',
  },
  {
    title: '备注',
    dataIndex: 'note',
    key: 'note',
    width: '30%',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: '10%'
  },
];

const handleAddChild = (parentNode: TreeItem) => {
  emits('add-child', parentNode)
}

const handleRemove = (record: TreeItem) => {
  const newTreeData = [...props.treeData]
  const removeNode = (nodes: TreeItem[]):boolean => {
    const index = nodes.findIndex(n => n.value === record.value)
    if(index !== -1){
      nodes.splice(index, 1);
      return true
    }
    for(const node of nodes){
      if(node.children && removeNode(node.children)){
        return true
      }
      return false
    }
    return false
  }
  if(removeNode(newTreeData) && newTreeData.length === 1){
    emits('update:treeData', newTreeData)
    message.success('删除节点成功')
  }else{
    message.error('删除节点失败')
  }
}
</script>

